<template>
  <div class="search">
    <div class="input-box">
      <input
        type="text"
        placeholder="搜索歌曲、歌手、专辑"
        v-model="keywords"
        @keyup="inputing"
        @keydown.enter="searching"
      />
      <i class="del" v-show="keywords.length > 0" @click="del"></i>
    </div>
    <div class="line"></div>
    <!-- 动态组件，根据组件名称来切换组件 -->
    <transition enter-active-class="animate__animated animate__slideInLeft">
      <component
        @play="$emit('play', $event)"
        @changekeyword="changeKeyword"
        :keywords="keywords"
        :wordHistory="wordHistory"
        :is="cname"
        @delhot="history"
      ></component>
    </transition>
  </div>
</template>
<script>
import SearchHot from "@/components/SearchHot";
import SearchSuggest from "@/components/SearchSuggest";
import SearchResult from "@/components/SearchResult";
import _ from "lodash";
export default {
  data() {
    return {
      cname: "SearchHot",
      wordHistory:[],
      keywords: "",
    };
  },
  methods: {
    //事件函数 返回的是一个节流函数
    inputing: _.debounce(function () {
      console.log("keywords===>", this.keywords);
      if (this.keywords.length < 1) {
        this.cname = "SearchHot";
      } else {
        this.cname = "SearchSuggest";
      }
      console.log(this.cname);
    }, 200),
    searching(event) {
      this.cname = "SearchResult";
      this.setHistory();
      event.target.blur();
    },
    changeKeyword(keyword) {
      //修改搜索关键词
      this.keywords = keyword;
      this.setHistory();
      this.cname = "SearchResult";
    },
    setHistory() {
     //去重
     //includes() ---- 判断一个数组是否包含一个指定的值
     //indexOf() ---- 搜索数组中的元素，并返回它所在的位置。
       if (!this.wordHistory.includes(this.keywords)) {
        //第一次添加历史记录
        this.wordHistory.unshift(this.keywords);
        localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
      } else {
        let i = this.wordHistory.indexOf(this.keywords);
        this.wordHistory.splice(i, 1);
        //unshift() 方法将新项添加到数组的开头，并返回新的长度。
        this.wordHistory.unshift(this.keywords);
        localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
      }
    },
    history(){
      localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
    },
    del() {
      this.keywords = "";
      this.cname = "SearchHot";
    },
  },
  components: {
    SearchHot,
    SearchSuggest,
    SearchResult,
  },
};
</script>

<style lang="less" scoped>
.search {
  .input-box {
    margin: 15px 10px;
    background: #eee;
    padding-left: 9px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    position: relative;
    &::before {
      content: "";
      background: url()
        no-repeat;
      display: inline-block;
      width: 13px;
      height: 13px;
    }
    input {
      flex: 1;
      line-height: 30px;
      height: 30px;
      overflow: hidden;
      padding-left: 8px;
      background-color: transparent;
      border: 0;
      outline: none;
      color: #333;
      &::-webkit-input-placeholder {
        color: #ccc;
      }
      &::-moz-input-placeholder {
        color: #ccc;
      }
      &::-ms-input-placeholder {
        color: #ccc;
      }
    }
    .del {
      background: url()
        no-repeat;
      position: absolute;
      width: 12px;
      height: 12px;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  div.line {
    border-bottom: 2px solid #eee;
    margin-bottom: 13px;
  }
}
</style>